<template>
  <div class="app-container page" ref="homeScroll" @scroll="handleScroll">
    <div class="top-content">
      <div class="my-tabs">
        <div class="tabs-item" :class="{ active: activeTabs === 1 }" @click="changeTabs(1)">
          <p>选品中心</p>
          <!-- <span>可选商品{{ total }}</span> -->
        </div>
      </div>
      <!-- 搜索条件表单 start -->
      <div class="form-box">
        <div class="params-form" :class="{ active: showSelect }">
          <el-form :model="postData.form" label-width="auto">
            <el-form-item label="在售价">
              <div class="space"><el-input v-model="postData.form.minPrice" />-<el-input v-model="postData.form.maxPrice" /></div>
            </el-form-item>
            <!-- <el-form-item label="上线同款" >
              <el-select clearable v-model="postData.form.minPrice" placeholder="请选择" >
                <el-option
                  v-for="item in toRaw(store.getDict('3'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictCode"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="是否定制">
              <el-select clearable v-model="postData.form.customType" placeholder="请选择">
                <el-option
                  v-for="item in toRaw(store.getDict('shop_product_custom_type'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品风格">
              <el-select clearable v-model="postData.form.productStyle" placeholder="请选择">
                <el-option
                  v-for="item in toRaw(store.getDict('shop_product_style'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="供应品类">
              <el-select clearable v-model="postData.form.minPrice" placeholder="请选择" >
                <el-option
                  v-for="item in toRaw(store.getDict('3'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictCode"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="是否模型">
              <el-select clearable v-model="postData.form.isModel" placeholder="请选择">
                <el-option
                  v-for="item in toRaw(store.getDict('shop_is_model'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="运营区域">
              <el-cascader
                v-model="postData.form.areaId"
                :options="area"
                :props="{
                  expandTrigger: 'hover',
                  value: 'cityCode',
                  label: 'name'
                }"
                style="width: 100%"
              />
              <!-- <el-select clearable v-model="postData.form.minPrice" placeholder="请选择">
                <el-option
                  v-for="item in toRaw(store.getDict('3'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictCode"
                ></el-option>
              </el-select> -->
            </el-form-item>
            <el-form-item label="市场定位">
              <el-select clearable v-model="postData.form.factoryGrade" placeholder="请选择">
                <el-option
                  v-for="item in toRaw(store.getDict('shop_product_factory_grade'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="是否自产">
              <el-select clearable v-model="postData.form.minPrice" placeholder="请选择" >
                <el-option
                  v-for="item in toRaw(store.getDict('3'))"
                  :key="item.dictCode"
                  :label="item.dictLabel"
                  :value="item.dictCode"
                ></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
          <div class="form-btn">
            <el-button type="primary" :icon="Search" @click="handelSearch">查询</el-button>
            <el-button type="primary" :icon="RefreshRight" @click="resetPage" plain>重置</el-button>
          </div>
        </div>
      </div>
      <!--   搜索条件表单 end   -->

      <div class="ke-box">
        <div class="kex">
          可选商品：<span>{{ selectNum }}</span>
        </div>
        <div class="search">
          <el-input
            v-model="postData.form.searchKey"
            @keydown.enter="handelSearch"
            @clear="handelSearch"
            style="width: 300px"
            placeholder="请输入类目名称搜索"
            clearable
          >
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
        </div>
      </div>
    </div>

    <div class="bottom-content">
      <!--   商品分类tree start   -->
      <div class="tree-left">
        <div class="title">
          <div></div>
          <span>商品分类</span>
        </div>
        <div class="titles">
          <div>已上架{{ pubLicNum }}</div>
        </div>
        <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick">
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span> ({{ data.notSelectNum }}) </span>
            </span>
          </template>
        </el-tree>
      </div>
      <!--   商品分类tree end   -->

      <!--    商品列表 start  -->
      <div class="shops-right" :class="{ active: showSelect }">
        <template v-if="showOn">
          <div class="shop-box" v-for="(item, i) in shopList" :key="i" v-loading="loading">
            <div class="top">
              <div class="img-box">
                <img :src="item.mainPicUrl" alt="" />
              </div>
            </div>
            <div class="bottom">
              <div class="header-title">{{ item.productName }}</div>
              <div class="header-price">
                <span>
                  工厂价 ¥ <span style="color: red">{{ item.factoryLowestPrice }}</span></span
                >
              </div>
              <div class="choose-shop">选购商家：{{ item.selectNum }}</div>
              <div
                class="area"
                @click="
                  () => {
                    item.isSelected == 0 && changeMask(i, item);
                  }
                "
                :class="{ active: item.isSelected != 0 }"
              >
                <span v-if="item.isSelected == 0">加入预选商品</span>
                <span v-if="item.isSelected == 1 && item.businessProductStatus == 5">已下架</span>
                <span v-if="item.isSelected == 1 && item.businessProductStatus == 3">已上架</span>
                <span v-if="item.isSelected == 1 && item.businessProductStatus != 3 && item.businessProductStatus != 5"
                  >已加入预选商品</span
                >
              </div>
              <!-- <MaskBox  ref="childRef" v-model:maskNum="maskNum" :num="i" @changeMasks="changeMasksd" :productId = 'productId'></MaskBox> -->
            </div>
          </div>
        </template>
        <div v-else style="display: flex; justify-content: center; width: 100%">
          <el-empty description="暂无数据" />
        </div>
      </div>
      <!--    商品列表 end  -->
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="postData.form.page"
        v-model:page-size="postData.form.size"
        :page-sizes="[12, 24, 48, 96]"
        @current-change="getPageList"
        @size-change="getPageList"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      />
    </div>
    <!-- 运营地区抽屉 -->
    <el-drawer :size="800" class="jzt-drawer" :with-header="false" modal-class="area-drawer">
      <div class="area-container">
        <div class="left">
          <div class="area-title">运营区域设置</div>
          <div class="search-input">
            <el-input placeholder="请输入关键词" :suffix-icon="Search" />
          </div>
          <div class="arae">
            <div class="province"></div>
            <div class="city"></div>
          </div>
        </div>
        <el-divider direction="vertical" />
        <div class="right"></div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref, toRaw, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import { RefreshRight, Search, MoreFilled, CaretTop } from "@element-plus/icons-vue";
import { size, template, debounce as _debounce } from "lodash";
import useCodeArrStore from "../../../store/modules/select";
import { debounce } from "./untils/debounce";
import { getCategoryList, getSelectPage, getPublishNum, addTenantSelect, getNotSelectNum } from "@/apis/products/selection";
import { getArea } from "@/apis/products/specifications";

const area = ref([]);
const { proxy } = getCurrentInstance();
const activeTabs = ref(1);
const productId = ref("");
const shopList = ref([]);
const showOn = ref(false);
const total = ref(0);
const store = useCodeArrStore();
const postData = reactive({
  form: {
    page: 1,
    size: 12
  }
});

/**
 *
 * @param data 获取可选商品的数量
 */
const selectNum = ref(0);
const getSelectNUm = () => {
  getNotSelectNum({
    page: 1,
    size: 9999
  }).then(res => {
    if (res.code === 200) {
      selectNum.value = res.data;
    }
  });
};

const handleNodeClick = data => {
  postData.form.categoryId = data.categoryId;
  getPageList();
};
const changeTabs = index => {
  activeTabs.value = index;
};

const loading = ref(true);
const getPageList = async () => {
  loading.value = true;
  await getSelectPage(
    toRaw({ ...postData.form, areaId: postData.form.areaId ? Number(postData.form.areaId[postData.form.areaId.length - 1]) : "" })
  )
    .then(res => {
      loading.value = false;
      const { data } = res;
      total.value = data.total ?? 0;
      showOn.value = !!data.records?.length;
      shopList.value = data.records || [];
    })
    .catch(() => {
      loading.value = false;
    });
};
const handelSearch = _debounce(() => {
  postData.form.page = 1;
  postData.form.size = 12;
  getPageList();
}, 500);
const resetPage = () => {
  postData.form = {
    page: 1,
    size: 12
  };
  getPageList();
};

const treeData = ref([]);
const defaultProps = {
  children: "children",
  label: "name"
};
const getTree = async () => {
  await getCategoryList(toRaw(postData.form)).then(res => {
    treeData.value = res.data || [];
  });
};

//监听滚动
const showSelect = ref(false);
const scollNum = ref(0);
const handleScroll = debounce(event => {
  // 获取滚动位置
  const currentScrollTop = event.target.scrollTop;
  const distance = currentScrollTop - scollNum.value;
  // 处理distance，比如更新data或者做其他操作
  scollNum.value = currentScrollTop;
  const scrollTop = document.querySelector(".page").scrollTop;
  if (scrollTop > 60) {
    showSelect.value = true;
  }
  if (scrollTop == 0) {
    showSelect.value = false;
  }
}, 100);
const addScroll = () => {
  const container = document.querySelector(".page");
  container.addEventListener("scroll", handleScroll);
};
const removeScroll = () => {
  const container = document.querySelector(".page");
  container.removeEventListener("scroll", handleScroll);
};

//调用子组件方法获取区域
const maskNum = ref(-92);
const changeMask = async (num, item) => {
  await addTenantSelect([item.productId]);
  proxy.$modal.msgSuccess("添加成功");
  getPageList();
  getSelectNUm();
};
const changeMasksd = () => {
  maskNum.value = -1;
};

const pubLicNum = ref(0);
const getPublishNums = async () => {
  const { data } = await getPublishNum();
  pubLicNum.value = data ?? 0;
};

onMounted(() => {
  addScroll();
  getTree();
  getPageList();
  getPublishNums();
  getSelectNUm(); //获取可选商品数量

  //获取省市区
  getArea().then(res => {
    area.value = res.data;
  });
});
onUnmounted(() => {
  removeScroll();
});
</script>

<style lang="scss" scoped>
@mixin flex-end {
  display: flex;
  justify-content: end;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin flex-align {
  display: flex;
  align-items: center;
}

.page {
  overflow-y: scroll;
  padding: 0;
  background: #fff;
  height: 85vh;
  position: relative;

  .top-content {
    position: sticky;
    top: 0;
    padding: 20px;
    z-index: 2;
    background: #fff;
  }

  .my-tabs {
    display: flex;

    .tabs-item {
      width: 282px;
      padding: 10px 20px;
      // border: 1px solid #eee;
      border-bottom: none;
      border-radius: 12px 12px 0 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      background-color: #f5f7fa;
      cursor: pointer;
      font-size: 12px;
      color: #86909c;

      p {
        font-size: 16px;
        color: #131414;
        line-height: 24px;
        display: flex;
        justify-content: space-between;

        .el-tag {
          height: 20px;
        }
      }

      &:first-of-type {
        margin-right: 20px;
      }

      &.active {
        background-color: white;
        box-shadow: 0px -5px 16px 0px rgba(4, 19, 74, 0.04);
      }
    }
  }

  .form-box {
    background: #fff;
    padding: 20px;
  }
}

.ke-box {
  display: flex;
  align-items: center;

  .search {
    margin-left: 20px;
  }

  .kex {
    width: 200px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f6f8fa;
    box-shadow: inset 2px 3px 7px 0px rgba(3, 56, 129, 0.18);
    border-radius: 4px 4px 4px 4px;
    font-family:
      PingFang SC,
      PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #4e5969;
    line-height: 24px;
    text-align: center;
    font-style: normal;
    text-transform: none;

    span {
      font-family:
        DIN Black,
        DIN Black;
      font-weight: 900;
      font-size: 16px;
      color: #3d3d3d;
      line-height: 24px;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }
  }
}

.bottom-content {
  display: flex;

  border-top: 1px solid #d8d8d8;
  position: relative;

  .tree-left {
    position: fixed;
    padding: 10px;
    min-width: 280px;
    border-right: 1px solid #d8d8d8;

    .title {
      padding: 10px;
      display: flex;
      align-items: center;

      div:nth-child(1) {
        width: 6px;
        height: 6px;
        background: #409eff;
        border-radius: 50%;
        margin-right: 10px;
      }

      span:nth-child(2) {
        font-family:
          HarmonyOS Sans SC,
          HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 18px;
        color: #131414;
        line-height: 24px;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }
    }

    .titles {
      width: 93px;
      height: 22px;
      background: #f0f0f0;
      border-radius: 3px 3px 3px 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family:
        PingFang SC,
        PingFang SC;
      font-weight: 400;
      font-size: 11px;
      color: #4e5969;
      margin-top: 6px;
      line-height: 20px;
      margin-left: 20px;
      text-align: left;
      font-style: normal;
      margin-bottom: 21px;
      text-transform: none;
    }
  }

  .shops-right {
    background: #f8fafb;
    padding: 20px;
    display: flex;
    width: 100%;
    margin-left: 300px;
    flex-wrap: wrap;
    justify-content: flex-start;

    &.active {
      padding-top: 110px;
    }

    .shop-box {
      width: 294px;
      overflow: hidden;
      margin-right: 25px;
      margin-bottom: 20px;
      position: relative;
      background: #ffffff;
      box-shadow: 4px 5px 16px 0px rgba(4, 19, 74, 0.04);
      border-radius: 10px 10px 10px 10px;

      .top {
        width: 294px;
        height: 200px;

        .img-box {
          width: 100%;
          height: 100%;
          box-shadow: 4px 0px 4px 0px rgba(4, 19, 74, 0.1);
          border-radius: 10px 10px 10px 10px;

          img {
            width: 100%;
            box-shadow: 4px 0px 4px 0px rgba(4, 19, 74, 0.1);
            border-radius: 10px 10px 10px 10px;
            height: 100%;
          }
        }
      }

      .bottom {
        padding: 20px 7px 0 12px;

        .header-title {
          font-family:
            Microsoft YaHei,
            Microsoft YaHei;
          font-weight: 700;
          min-height: 50px;
          font-size: 14px;
          color: #3d3d3d;
          margin-bottom: 12px;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          text-transform: none;
        }

        .header-price {
          font-family:
            Microsoft YaHei,
            Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          margin-bottom: 10px;
          color: #4e5969;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;

          span:nth-child(2) {
            color: red;
          }
        }

        .choose-shop {
          font-family:
            Microsoft YaHei,
            Microsoft YaHei;
          font-weight: 400;
          font-size: 14px;
          margin-bottom: 10px;
          color: #4e5969;
          line-height: 24px;
          text-align: left;
          font-style: normal;
          text-transform: none;
        }

        .area {
          display: flex;
          align-items: center;
          cursor: pointer;
          justify-content: center;
          height: 32px;
          margin-bottom: 30px;
          background: #007dff;
          font-family:
            PingFang SC,
            PingFang SC;
          font-weight: 400;
          font-size: 14px;
          color: rgba(255, 255, 255, 0.9);
          line-height: 22px;
          text-align: center;
          font-style: normal;
          text-transform: none;
          border-radius: 3px 3px 3px 3px;
          &.active {
            background: #86909c;
          }
        }
      }
    }
  }
}

.params-form {
  background: #f6f8fa;
  margin-bottom: 10px;
  padding: 20px;
  position: relative;

  &.active {
    position: absolute;
    opacity: 0;
    top: 0;
    width: 1px;
    height: 1px;
  }

  ::v-deep(.el-form) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 76px;
  }

  .form-btn {
    @include flex-end;
  }

  .space {
    flex: 1;
    display: flex;
    gap: 10px;
  }
}

.pagination {
  margin-top: 20px;
  @include flex-end;
}

::v-deep(.is-error) {
  .tip {
    display: none;
  }
}

// 区域抽屉
.area-container {
  height: 100%;
  display: flex;

  .el-divider {
    margin: unset;
  }

  .left,
  .right {
    flex: 1;
    padding: 20px;
  }

  > div {
    height: 100%;
  }

  .left {
    .search-input {
      margin: 12px 0;
    }

    .arae {
      height: calc(100% - 57px);
      display: flex;

      .province {
        width: 120px;
      }

      .city {
        flex: 1;
        background: #f4f6f8;
        height: 100%;
      }
    }
  }
}
</style>
